﻿
@{
    Layout = null;

}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BTable</title>
    <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Plugins/ba/css/btable.css" rel="stylesheet" />
</head>
<body>
    <div style="margin: 0 15px;">
        <div style="margin:0px; background-color: white;">
            <blockquote class="layui-elem-quote">
                <a href="@Url.Action("Create","Home")" class="layui-btn layui-btn-small">
                    <i class="fa fa-plus" aria-hidden="true"></i> 添加
                </a>
                <a href="javascript:;" data-href="@Url.Action("InitData","Home")" data-action="init_data" class="layui-btn layui-btn-small">
                    <i class="fa fa-plus" aria-hidden="true"></i> 初始化数据
                </a>
                <form class="layui-form" style="float:right;">
                    <div class="layui-form-item" style="margin:0;">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux" style="padding:0;">
                            <button lay-filter="search" class="layui-btn" lay-submit><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
                        </div>
                    </div>
                </form>
            </blockquote>
        </div>
        <div id="content"></div>
    </div>
    <script src="~/Plugins/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../Plugins/ba/js/',
            v: new Date().getTime()
        }).use(['btable', 'baajax'], function () {
            var btable = layui.btable(),
                $ = layui.jquery,
                form = layui.form(),
                layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer, //获取当前窗口的layer对象
                baajax = layui.baajax;

            
            btable.set({
                openWait: true,
                elem: '#content',
                url: '@Url.Action("GetDataPages", "Home")',
                type:'post',
                pageSize: 20,
                columns: [{
                    fieldName: '名称',
                    field: 'Name'
                }, {
                    fieldName: '加入时间',
                    field: 'CreateTime'
                }, {
                    fieldName: '操作',
                    field: 'ID',
                    format: function (val) {
                        var html = '<a href="javascript:;" class="layui-btn layui-btn-mini">编辑</a>';
                        html += '<input type="button" value="删除" data-action="del" data-id="' + val + '" class="layui-btn layui-btn-mini layui-btn-danger" />';
                        return html;
                    }
                }],
                even: true,
                //skin: 'row',
                checkbox: false,
                paged: true,
                singleSelect: true,
                onSuccess: function ($elem) {
                    $elem.children('tr').each(function () {
                        $(this).children('td:last-child').children('input').each(function () {
                            var $that = $(this);
                            var action = $that.data('action');
                            var id = $that.data('id');
                            $that.on('click', function () {
                                switch (action) {
                                    case 'del': //删除
                                        var userName = $that.parent('td').siblings('td[data-field=Name]').text();
                                        //询问框
                                        layerTips.confirm('确定要删除[ <span style="color:red;">' + userName +'</span> ] ？', { icon: 3, title: '系统提示' }, function (index) {
                                            baajax.post('@Url.Action("Delete","Home")', { id: id }, function (res) {
                                                layerTips.msg(res.msg);
                                                if (res.rel) {
                                                    btable.get();
                                                }
                                                layerTips.close(index);
                                            });
                                        });
                                        break;
                                }
                            });
                        });
                    });
                }
            });
            //监听初始化按钮事件
            $('a[data-action=init_data]').on('click', function () {
                var $this = $(this);
                var href = $this.data('href');
                $.getJSON(href, null, function (res) {
                    layerTips.msg(res.msg);
                    if (res.rel) {
                        btable.get();
                    }
                });
                layerTips.msg(href);
            });
            btable.render();
            //监听搜索表单的提交事件
            form.on('submit(search)', function (data) {
                btable.get(data.field);
                return false;
            });

            $(window).on('resize', function (e) {
                var $that = $(this);
                $('#content').height($that.height() - 92);
            }).resize();
        });
    </script>
</body>
</html>
